<template>
	<view class="body">
		<view class="title">
			<text>Hello!</text>
			<text>欢迎来到镇北盲盒</text>
		</view>
		<view class="input">
			<input class="ipt" type="text" placeholder="请输入手机号" v-model="phone" />
			<view class="" style="position: relative;">
				<input class="ipt ipt2" v-model="phoneCode" placeholder="请输入验证码" style="padding-inline-end: 5.2rem;" />
				<view class="get-code-btn" @tap="getPhoneCode">
					<button>{{getCodeText}}</button>
				</view>
				<!-- <view>
				<input v-if="showPassword" class="ipt ipt2" type="text" placeholder="验证码" v-model="phoneCode" />
			</view> -->
				<!-- <input v-else class="ipt ipt2" type="password" placeholder="验证码" v-model="phoneCode" /> -->
				<!-- <image @click="togglePasswordVisibility" src="../../static/eyes.png" mode=""
					style="position: absolute; width: 25px;height: 25px; top: 13px; right: 20px;"></image> -->
			</view>
			<view>
				<input class="ipt ipt2" type="text" placeholder="邀请码" v-model="inviteCode" />
			</view>
		</view>
		<view class="login" @tap="disableMultiClick(submitLogin)">
			<button>登陆</button>
		</view>
		<view class="agreement">
			<checkbox class="checkbox" @click="updateCheck()" v-model="agreed" />
			<text class="text"
				style="color: white; font-size: 22rpx; margin-top: 10rpx; margin-left: 15rpx; letter-spacing: 1px;">
				我已阅读并同意

				<text style="color: rgb(108, 67, 225);" @click="goRule(1)">《用户协议》</text>
				和
				<text style="color: rgb(108, 67, 225);" @click="goRule(3)">《隐私协议》</text>

			</text>
		</view>
	</view>
	<!-- 	<view class="container">
		<input class="input phone-input" placeholder="请输入手机号" v-model="phone"></input>
		<view class="code-input-c">
			<input class="input code-input" v-model="phoneCode" placeholder="请输入验证码"></input>
			<view class="get-code-btn" @tap="getPhoneCode">
				{{getCodeText}}
			</view>
		</view>

		<view class="code-input-c">
			<input class="input code-input" v-model="inviteCode" placeholder="请输入邀请码"></input>
		</view>

		<button class="submit-btn" @tap="disableMultiClick(submitLogin)">登陆</button>
		<view class="user-statement-c">
			<UserStatement v-model="isCheckUserStatement"></UserStatement>
		</view>
	 -->
</template>

<script>
	import {
		$getStorage,
		$setStorage
	} from "@/utils/auth.js";

	export default {
		name: "login",
		components: {},
		data() {
			return {
				isLoginLoading: false,
				isCheckUserStatement: true,
				phone: '',
				phoneCode: '',
				// invite_code: '',
				clock: 0,
				inviteCode: '',
				showPassword: false,
				agreed: false,
			}
		},
		created() {
			// 从页面路径中解析 inviteCode
			const url = decodeURIComponent(window.location.href);
			// 去除 #/
			const urlWithoutHash = url.replace(/#\/?/, '');
			const match = urlWithoutHash.match(/invite_code=([^&]*)/);
			if (match) {
				this.inviteCode = match[1];
			}
		},
		onShow() {
			let token = $getStorage('token')
			console.log(token)
			this.$http('/user').then(res => {
				if (res.code == 200) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			})
			// if (token) {
			// 	// console.log(token)
			// 	setTimeout(res => {
			// 		uni.navigateBack({
			// 			delta: 1
			// 		})
			// 	}, 100)
			// }
		},
		computed: {
			isPhonePass() {
				return this.phone.length === 11
			},
			isCanSubmit() {
				return this.isPhonePass
			},
			getCodeText() {
				if (this.clock <= 0) {
					return '验证码'
				} else {
					return this.clock + 's'
				}
			}
		},
		methods: {
			// 用户协议
			goRule(id) {
				uni.navigateTo({
					url: "/pages/rule/rule/rule?id=" + id
				})
			},
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			stopLogin() {
				$setStorage('stop_login_time', (new Date()).getTime())
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			refreshClock() {
				setTimeout(res => {
					this.clock--

					if (this.clock > 0) {
						this.refreshClock()
					}
				}, 1000)
			},
			getPhoneCode() {
				if (this.clock > 0) {
					return false
				}

				if (!this.isPhonePass) {
					uni.showModal({
						title: '',
						content: '手机号不正确',
						icon: 'none'
					})
					return false
				}

				uni.showLoading({
					title: '请求中',
					mask: false
				})
				this.$http('/sendSms/' + this.phone, 'get').then(res => {
					uni.hideLoading()
					this.clock = 60
					this.refreshClock()
				})
			},
			updateCheck() {
				this.agreed = !this.agreed
			},
			submitLogin() {

				if (!this.agreed) {
					uni.showToast({
						title: '请先阅读并同意《用户使用协议》',
						icon: 'none'
					})
					return false
				}

				if (!this.isCanSubmit) {
					uni.showModal({
						title: '',
						content: '请填写正确手机号及验证码',
						icon: 'none'
					})

					return false
				}

				// uni.showLoading({
				// 	title: "登录中"
				// })

				let type = 'h5/with-phone-code'
				let params = {
					phone: this.phone,
					phone_code: this.phoneCode,
					invite_code: this.inviteCode
				}
				this.$http("/deleteUsers/selectlogin", "get", {
					phone: params.phone
				}).then(res => {
					if (res.message == "注销请求正在审核中，请等待" || res.message == '没有注销请求，请登录' || res.message == '审核驳回') {
						return this.$store.dispatch("login", {
							type: type,
							params: params
						}).then(res => {
							this.$store.dispatch("getUserInfo")
							if (res.code == 200) {
								if ($getStorage("rewardKey")) {
									uni.navigateTo({
										url: '/pages/reward/index?key=' +
											$getStorage("rewardKey")
									})
								} else {
									uni.switchTab({
										url: '/pages/index/index'
									})
									// $setStorage("otherAuthority", res.data.otherAuthority)
									// 删除 invite_code 参数
									const newURL = window.location.href.replace(
										/(\?|&)invite_code=[^&]*/, '');
									// 使用 replaceState 方法更新浏览器历史记录并改变地址栏
									window.history.replaceState({}, document.title,
										newURL);
								}
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								return false
							}
						})
					} else if (res.message == '注销成功') {
						uni.showModal({
							title: '注销成功',
							content: '您的账号已经注销成功，不可登录',
							icon: 'none'
						})
					} else if (res.code == 403) {
						uni.showModal({
							title: '温馨提示',
							content: res.message,
							icon: 'none'
						})
					} else if (res.message == "您的账号已被封禁，请联系管理员") {
						uni.showModal({
							title: '温馨提示',
							content: res.message,
							icon: 'none'
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// background-color: #000;
		

		.body {
			margin: 0;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			// background-color: black;
			padding: 40px;
			background: url('https://zzboomcos-1317756147.cos.ap-nanjing.myqcloud.com/blind-box/92291728729879697.png') center/ cover no-repeat;
			background-size: 100% 100%;
		}

		.title {
			box-sizing: border-box;
			margin-top: 230px;
			display: flex;
			flex-direction: column;
			color: white;
			font-size: 18px;
			letter-spacing: 1px;
			font-weight: bold;

			text {
				margin-top: 5rpx;

			}
		}

		.get-code-btn {
			position: absolute;
			right: 2px;
			top: 3px;
			color: white;
			font-size: 20rpx;
			width: 5rem;

			button {
				border-radius: 50px;
				background-color: rgb(108, 67, 225);
				color: white;
				font-size: 30rpx;
				height: 45px;
				width: 100%;
				line-height: 45px;
			}
		}

		.input {
			width: 100%;
			height: 230px;
			// background-color: blue;
			margin-top: 30px;
			// padding: 20rpx;
			box-sizing: border-box;
		}

		.ipt {
			margin-top: 10px;
			width: 100%;
			height: 50px;
			border: 2px solid white;
			border-radius: 50px;
			box-sizing: border-box;
			padding-left: 20px;
			color: white;
		}

		.ipt2 {
			margin-top: 20px;
		}

		.ipt2::-webkit-outer-spin-button,
		.ipt2::-webkit-inner-spin-button {
			-webkit-appearance: none;
			appearance: none;
			margin: 0;
		}

		.login {
			margin-top: 25px;
			width: 100%;
			height: 50px;

			button {
				border-radius: 50px;
				background-color: rgb(108, 67, 225);
				color: white;
				font-size: 30rpx;
				height: 45px;
				width: 100%;
				line-height: 45px;
			}
		}

		.agreement {
			display: flex;
			align-items: center;
			margin: 60px 0 0 25px;
		}

		.checkbox {
			width: 16px;
			height: 16px;
			transform: scale(0.6);

		}

	}
</style>